<template>
  <div class="all">
    <div class="top">
      <header>
        <div class="div">
          <img src="../../../../assets/返回.png" @click="back()" alt="">
          <span class="solid" @click="back()">返回</span>
        </div>
        <div class="div">
          <span>成员招募</span>
        </div>
        <div class="div"></div>
      </header>
      <div style="display: none" class="menu" >
        <ul @click="MenuOnchange">
          <li v-for="(item, index) in modelMenu"
              :key="index"
              @click="Active = item.index"
              :class="[Active === item.index ? 'selectMenu' : '']"
          >{{item.name}}</li>
        </ul>
      </div>
    </div>
    <div  style="width: 100%;height: 50vh;display: flex;align-items: center;justify-content: center" v-show="isLoading">
      <van-loading size="24px" type="spinner" color="#1989fa">加载中...</van-loading>
    </div>
    <van-empty
      style="width: 100%;height: 60%"
      v-show="doctorList.length <= 0 && isLoading === false"
      class="custom-image"
      :image="require('../../../../assets/空两本书.png')"
      description="暂无招募成员"
    />
<!--      :description="`暂无`+menuText+`医生`"-->
    <div class="box"
         @click.stop="doctorInfo(item)"
         v-for="(item, index) in doctorList" :key="index">
      <div class="box_left">
<!--        <img v-if="item.PHOTO !== '' && item.PHOTO !== undefined && item.PHOTO !== null" :src="item.PHOTO" class="PHOTO" alt="">-->
<!--        <img v-else src="../../../../assets/男医生@2x.png" class="PHOTO" alt="">-->
        <img v-if="item.PHOTO" :src="item.PHOTO" class="PHOTO" alt="">
        <img  v-else-if="Number(item.SEX) == 1" src="../../../../assets/男医生@2x.png" class="PHOTO" alt="">
        <img  v-else-if="Number( item.SEX )== 2" src="../../../../assets/女医生@2x.png" class="PHOTO" alt="">
<!--        <button v-if="item.USER_ID === TeamLeader" class="tagTuandui">团队长</button>-->
        <!--        <button v-else-if="Active === 0 && userid === TeamLeader"-->
        <!--                class="yijiao"-->
        <!--        @click.stop="transferLeader(item)">移交团队长</button>-->
      </div>
      <div class="box_right">
        <ul>
          <li>
            <span class="name">
              <span style="font-weight: bold;font-size: 15px">{{item.NICK_NAME}}</span>
<!--              <span>|</span>-->
<!--              <span style="font-weight: 500;font-size: 13px !important;">{{item.MAJOR}}</span>-->
<!--              <span>|</span>-->
<!--              <span style="font-weight: 500;font-size: 13px !important;">{{item.DEPART}}</span>-->
            </span>
<!--            <button-->
<!--              @click.stop="ITEM = item, show = true, selectID = item.group_id, selectID_name = item.group_name"-->
<!--              v-show="item.USER_ID !== TeamLeader && Active === 0 && TeamLeader == userid"  class="btnXiangQing">-->
<!--              {{item.group_id ? '更改分配' : '分配'}}-->
<!--            </button>-->
          </li>
          <li>
            <span style="font-weight: 500;font-size: 13px !important;">{{item.MAJOR}}</span>
            <span>&nbsp;|&nbsp;</span>
            <span style="font-weight: 500;font-size: 13px !important;">{{item.DEPART}}</span>
          </li>
          <li>
            <span class="jieShao">{{item.HOSPITAL_NAME}}</span>
            <button class="biaoqian">{{item.GRADE}}</button>
          </li>
        </ul>
<!--        <div class="box_rigth_bottom">
          <p>
            <a >接诊率:</a><span>{{item.jiezhenCount}}</span>
            <a >好评率:</a><span>{{item.haopingLv}}</span>
            <a >咨询量:</a><span>{{item.zixunCount}}</span>
          </p>
          <p class="goodAt">
            <a style="display: block">擅长:</a>
            <span>{{item.Goodat}}</span>
          </p>
          <p>
            <a >最快回复:</a>
            <span style="color: #1DA4F2"  v-if="item.min !== undefined && item.min !== null && item.min !== ''">{{item.min}}</span>
            <span v-else style="color: #999999">暂无</span>
            <a >平均回复:</a>
            <span style="color: #1DA4F2" v-if="item.avg !== undefined && item.avg !== null && item.avg !== ''">{{item.avg}}</span>
            <span style="color: #999999" v-else>暂无</span>
          </p>
          <p class="goodAt" v-show="Active === 1">申请说明: {{item.req_msg}}</p>
          <p class="goodAt" v-show="item.group_name">
            <a style="color: #333333">所属小组：</a>
            <span style="color: #1da4f2!important;">{{item.group_name}}</span>
          </p>
        </div>-->
        <div class="box_bottom" v-show="Active === 1">
          <button class="refuse" @click.stop="refuse(item)">拒绝</button>
          <button class="agree" @click.stop="agree(item)">同意</button>
        </div>
      </div>
    </div>
    <van-dialog v-model="agreeShow"
                width="80%"
                confirm-button-color="#1da4f2"
                title="您确认同意该成员的申请加入吗？"
                @confirm="agreeConfirm()"
                show-cancel-button>
    </van-dialog>
    <van-dialog v-model="refuseShow"
                width="80%"
                confirm-button-color="#1da4f2"
                title="您确认拒绝该成员的申请加入吗？"
                @confirm="refuseConfirm()"
                show-cancel-button>
    </van-dialog>
    <!--    transferLeader-->
    <van-dialog v-model="transferLeaderShow"
                width="80%"
                confirm-button-color="#1da4f2"
                :title="`您确认要移交团队长为[` + ITEM.NICK_NAME +`]吗？`"
                @confirm="transferLeaderConfirm()"
                show-cancel-button>
    </van-dialog>

    <van-popup v-model="show"
               @close="PoPactiveNames = [],
PoPactiveNamesChilden = []"
               round position="bottom" :style="{ height: '80%', bottom: '50px' }" >
      <div class="popHeader">
        <div class="div" @click="show = false" style="color: #999999">取消</div>
        <div class="div">选择分配组</div>
        <div class="div solid" @click="fenpeiShow = true">确认</div>
      </div>
      <van-collapse v-model="PoPactiveNames">
        <van-collapse-item
          v-if="erjiList"
          v-for="(curr, index) in erjiList"
          :key="index"
          :name="curr.id"
        >
          <template #title>
            <div class="tempTitle"  @click="clickErji(curr)">
              <span>
                <img v-if="selectID == curr.id" class="treeImg" src="../../../../assets/选中树状蓝.png" alt="">
                <img v-else src="../../../../assets/未选中树状灰.png" class="treeImg" alt="">
                 {{curr.group_name}}
              </span>
              <img src="../../../../assets/selectImg/选择蓝@2x.png" v-show="selectID == curr.id" class="selectImg" alt="">
            </div>
          </template>
          <p class="PTree"
             @click="selectID = currXiaji.id, selectID_name = item.group_name"
             v-for="(currXiaji, xiajiIndex) in curr.xiaji"
             :key="xiajiIndex"
             :name="currXiaji.id">
            <span>
              <img v-if="selectID == currXiaji.id" class="treeImg" src="../../../../assets/选中树状蓝.png" alt="">
                <img v-else src="../../../../assets/未选中树状灰.png" class="treeImg" alt="">
              {{currXiaji.group_name}}
            </span>
            <span>
              <img src="../../../../assets/selectImg/选择蓝@2x.png" v-show="selectID == currXiaji.id" class="selectImg" alt="">
            </span>
          </p>
        </van-collapse-item>
      </van-collapse>
    </van-popup>
    <van-dialog v-model="fenpeiShow"
                width="80%"
                confirm-button-color="#1da4f2"
                :title="`您确认要将`+ ITEM.NICK_NAME +`分配到` +selectID_name+ `吗？`"
                @confirm="fenpeiConfirm()"
                show-cancel-button>
    </van-dialog>
  </div>
</template>

<script>
import {Toast} from 'vant'

export default {
  name: 'MemberZhaoMu',
  data () {
    return {
      modelMenu: [
        {
          name: '已加入',
          index: 0
        }, {
          name: '待加入',
          index: 1
        }
      ],
      Active: 1,
      doctorList: [],
      id: this.$route.query.id, // id与team_id是同一值
      team_id: this.$route.query.team_id, // id与team_id是同一值
      isLoading: true,
      TeamLeader: this.$route.query.TeamLeader,
      userid: this.$route.query.doc_user_id,
      ITEM: [],
      agreeShow: false,
      refuseShow: false,
      transferLeaderShow: false,
      PoPactiveNames: [],
      PoPactiveNamesChilden: [],
      erjiList: [],
      show: false,
      selectID: 0,
      selectID_name: '',
      fenpeiShow: false
    }
  },
  computed: {
    menuText: function () {
      if (this.Active === 0) {
        return '已加入'
      } else {
        return '待加入'
      }
    }
  },
  mounted () {
    this.MenuOnchange()

    if (this.TeamLeader == this.userid) {
      this.getTeamErji()
    }
  },
  methods: {
    fenpeiConfirm () {
      this.$http.changeTeamZuZhi({
        doc_user_id: this.ITEM.USER_ID, // 选择医生的userid
        team_id: this.team_id, //
        group_id: this.selectID
      })
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            this.show = false
            this.MenuOnchange()
            this.$toast('分配成功')
          } else {
            this.$toast(res.data.msg)
          }
        })
        .catch(err => {
          console.log(err)
          this.$toast('您的网络有些拥挤，请稍后再试')
        })
    },
    // 二级列表点击下的成员信息或二级列表
    clickErji (item) {
      this.$http.findTeamGroupTwoAndThree({id: item.id})
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            let Data = res.data.data
            this.selectID = item.id
            this.selectID_name = item.group_name
            this.$set(item, 'xiaji', Data.xiaji)
            this.$set(item, 'members', Data.members)
          } else {
            Toast(res.data.msg)
          }
        })
        .catch(err => {
          console.log(err)
          Toast('您的网络有些拥挤，请稍后再试')
        })
    },
    // 获取二级列表
    getTeamErji () {
      this.$http.findTeamGroupTwo({team_id: this.team_id})
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            this.erjiList = res.data.data
          } else {
            Toast(res.data.msg)
          }
        })
        .catch(err => {
          console.log(err)
          Toast('您的网络有些拥挤，请稍后再试')
        })
    },
    // 移交确认按钮
    transferLeaderConfirm () {
      this.$http.exitTeamDuiZhang({id: this.team_id, manager_doc_user_id: this.ITEM.USER_ID})
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            Toast('移交成功')
            this.MenuOnchange()
          } else {
            Toast(res.data.msg)
          }
        })
        .catch(err => {
          console.log(err)
          Toast('您的网络有些拥挤，请稍后再试')
        })
    },
    // 点击移交按钮
    transferLeader (item) {
      this.ITEM = item
      this.transferLeaderShow = true
    },
    // 拒绝确认按钮
    refuseConfirm () {
      this.$http.NoTeamRequest({team_id: this.team_id, doc_user_id: this.ITEM.USER_ID})
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            Toast('您已拒绝该成员的申请加入')
            this.MenuOnchange()
          } else {
            Toast(res.data.msg)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 点击拒绝按钮
    refuse (item) {
      this.ITEM = item
      this.refuseShow = true
    },
    // 同意 加入接口
    agreeConfirm () {
      this.$http.agreeTeamRequest({team_id: this.team_id, doc_user_id: this.ITEM.USER_ID})
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            Toast('您已同意该成员的申请加入')
            this.MenuOnchange()
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 同意加入按钮
    agree (item) {
      this.ITEM = item
      this.agreeShow = true
    },
    // 查看医生详细资料
    doctorInfo (data) {
      if (this.Active === 1) {
        sessionStorage.setItem('req_msg', data.req_msg)
      }
      this.$router.push({path: '/doctorInfo', query: {doc_user_id: data.USER_ID, Active: this.Active, id: this.team_id}})
    },
    MenuOnchange (index) {

      // if (this.Active === 0) {
      //   // 获取团队医生
      //   this.getTeamDoctor()
      // } else {
      //   // 获取 申请加入的医生
      //   this.getWeiTeamDoctor()
      // }
      // 获取 申请加入的医生
      this.getWeiTeamDoctor()
    },
    // 获取团队医生信息
    getTeamDoctor () {
      this.doctorList = []
      this.isLoading = true
      this.$http.findDoctor({team_id: this.team_id})
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            this.doctorList = res.data.data
            this.isLoading = false
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    getWeiTeamDoctor () {
      this.doctorList = []
      this.isLoading = true
      this.$http.findDoctor({wait_team_id: this.team_id})
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            this.doctorList = res.data.data
            this.isLoading = false
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    back () {
      this.$router.history.go(-1)
    }
  }
}
</script>

<style scoped>
.all{
  width: 100%;
  height: 100%;
  overflow: auto;
  background: #FAF9FE;
}
.top{
  position: sticky;
  top: 0;
  z-index: 999;
}
.popHeader,
header{
  width: 100%;
  height: 44px;
  font-family: "PingFang SC";
  position: sticky;
  top: 0;
  z-index: 99;
  background: #FFFFFF;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #E5E5E5;
}
.div{
  width: 33%;
  font-size: 15px;
  font-weight: bold;
  display: flex;
  align-items: center;
}
.div:nth-child(1) img{
  margin: 0 5px 0 15px;
}
.div:nth-child(1) img,
.imgMore{
  width: 7px;
  height: 13px;
}
.imgMore{
  margin-left: 5px;
}
.div:nth-child(2){
  justify-content: center;
}
.div:nth-child(3){
  justify-content: flex-end;
}
.solid{
  color: #1da4f2;
}
.menu{
  width: 100%;
  height: 12vw;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  box-sizing: border-box;
  font-size: 13px;
  font-family: PingFang SC;
  font-weight: bold;
  overflow-x: auto;
  background: white;
  position: sticky;
  top: 12vw;
  z-index: 9999;
  border-bottom: 1px solid #E5E5E5;
}
.menu::-webkit-scrollbar{
  display: none;
}
.menu ul{
  height: 29px;
  display: flex;
  align-items: center;
  border-radius: 5px;
}
.menu ul li:first-child{
  border-radius: 5px 0 0 5px;
}

.menu ul li:last-child{
  border-radius: 0px 5px 5px 0px;
}
.menu ul li{
  width:90px;
  height: 29px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #1da4f2;
}
.selectMenu{
  color: white !important;
  background: #1da4f2 !important;
}
.PHOTO{
  width: 55px;
  height: 55px;
  border-radius: 50%;
}
.box{
  padding: 10px;
  box-sizing: border-box;
  background: white;
  margin-bottom: 8px;
  display: flex;
}
.box_left{
  width: 23%;
  display: flex;
  align-items: center;
  flex-direction: column;
  /*justify-content: space-between;*/
}
.dict_name{
  font-size: 11px;
  border: 1px solid #1DA4F2;
  border-radius: 2px;
  background: rgba(16, 184, 246, 0.1);
  color: #1da4f2;
  padding: 1px 3px;
  box-sizing: border-box;
  white-space: nowrap;
  /*margin-top: 10px;*/
}
.tagTuandui,
.yijiao{
  font-size: 11px;
  min-height: 18px;
  padding: 0 5px;
  box-sizing: border-box;
  border-radius: 19px;
  border: none;
}
.tagTuandui{
  background: linear-gradient(90deg, #F9BD77, #FFED91);
  color: #A8610B;
}
.yijiao{
  border: 1px solid;
  background: #FFFFFF;
  color: #1da4f2;
}
.box_right{
  width: 78%;
}
.box_right ul{
  /*height: 60px;*/
  display: flex;
  flex-direction: column;
  align-content: space-around;
  justify-content: space-around;
}
.box_right ul li{
  height: 25px;
  display: flex;
  align-items: center;
}
.box_right ul li:nth-child(1){
  justify-content: space-between;
}
.name{
  font-size: 15px;
  font-family: PingFang SC;
  color: #333333;
}
.biaoqian{
  /*padding: 0px 8px;*/
  min-width: 44px;
  height: 18px;
  border-radius: 15px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  /* background: rgba(29, 164, 242, 0.1); */
  background: transparent;
  color: #1DA4F2;
  /* border: none; */
  border: 1px solid;
  font-size: 11px;
  margin-left: 8px;
}
.btnXiangQing{
  color: white;
  background: #1DA4F2;
  border: none;
  padding: 5px 15px;
  border-radius: 5px;
  box-sizing: border-box;
  font-size: 11px;
}
.btnXiangQing img{
  width: 5px;
  height: 9px;
  margin-left: 5px;
}

.btnXiangQing,
.biaoqian,
.jieShao
{
  display: flex;
  align-items: center;
  justify-content: center;
}
.jieShao{
  font-size: 13px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #333333;
  margin-right: 8px;
}
.box_rigth_bottom{
  margin-top: 5px;
}
.box_rigth_bottom p{
  margin-bottom: 5px;
}
.box_rigth_bottom p:nth-child(1),
.box_rigth_bottom p:nth-child(3){
  font-size: 13px;
}
.box_rigth_bottom p a{
}
.box_rigth_bottom p span{
  color: #E3170D;
  margin: 0 8px 0 3px;
}
.box_bottom{
  display: flex;
  justify-content: flex-end;
  font-size: 15px;
  margin-top: 8px;
}
.box_bottom button{
  min-width: 60px;
  height: 29px;
  border-radius: 5px;
  margin-left: 20px;
  border: none;
}
.agree{
  color: #FFFFFF;
  background: #1da4f2;
  border-color: #1da4f2;
}
.refuse{
  border: 1px solid #999999 !important;
  background: #FFFFFF;
}
.goodAt{
  font-size: 13px;
  display: flex;
}
.goodAt a{
  display: block;
  white-space: nowrap;
}
.goodAt span{
  /*width: 80%;*/
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  color: #333 !important;
}
.popHeader{
  padding: 0 10px;
  box-sizing: border-box;
}
.selectImg{
  width: 11px;
  height: 7px;
}
.treeImg{
  width: 8px;
  height: 8px;
  margin-right: 8px;
}
.tempTitle,
.PTree{
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #333333;
}
.PTree {
  height: 44px;
  padding-left: 15px;
  box-sizing: border-box;
}
.tempTitle span,
.PTree span{
  display: flex;
  align-items: center;
}
.PTree .photo{
  margin-right: 8px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
}
/deep/ .van-collapse-item__content {
  padding: 0px 16px;
}
</style>
